<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2022-11-09 17:36:48
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-10 10:57:01
-->
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>全选反选取消</title>
		
		<script type="text/javascript">
			var first = null;
			window.onload = function(){
				first = document.getElementById('first')
			}

			function changeAll(qf){
				// qf要求传一个标签进来   
				var allInputs = document.getElementsByName('cb');
				for(var i=0;i<allInputs.length;i++){
					// 先获取这个按钮的状态 
					// 这个按钮的状态给到 每一个inputs 
					allInputs[i].checked =qf.checked;
					// allInputs[i].checked =first.checked;
					// 如果不设置参数 那么需要获取first这个标签  
					// 如果设置了参数  调用的时候 把this 当做实参传递进来 
					// 点击谁谁就是这个this 

				}
			}
			// changeAll(this); // 点击谁 谁就是this 
			// 用户点击this  就相当于 获取了这个标签 
			// 这个标签作为实参传给 changeAll()
			function selectAll(){
				var allInputs = document.getElementsByName('cb');
				for(var i=0;i<allInputs.length;i++){
					allInputs[i].checked = true;
				}
			}


			function reverseAll(){
				var allInputs = document.getElementsByName('cb');
				for(var i=0;i<allInputs.length;i++){
					// if(allInputs[i].checked == true){
					// 	allInputs[i].checked = false
					// }else{
					// 	allInputs[i].checked = true;
					// }
					allInputs[i].checked = allInputs[i].checked == true?false:true;
				}
			}


			function cancelAll(){
				var allInputs = document.getElementsByName('cb');
				for(var i=0;i<allInputs.length;i++){
					allInputs[i].checked = false;
				}
			}
		</script>
	</head>
	<body>
		<table align="center" width="70%" border="1" cellpadding="5" cellspacing="0" id="table">
			<thead>
				<tr>
		            <th width="10%"><input id="first" type="checkbox" onclick="changeAll(this)"></th>
		            <th>标题</th>
		            <th>发件人</th>
		            <th>时间</th>
		        </tr>
			</thead>
			<tbody>
				<tr>
		            <td align="center"><input type="checkbox" name="cb"></td>
		            <td>Title1</td>
		            <td>赵一伤</td>
		            <td>2014-6-1</td>
		        </tr>
		        <tr>
		            <td align="center"><input type="checkbox" name="cb"></td>
		            <td>Title2</td>
		            <td>田二败</td>
		            <td>2014-5-5</td>
		        </tr>
		        <tr>
		            <td align="center"><input type="checkbox" name="cb"></td>
		            <td>Title3</td>
		            <td>孙三毁</td>
		            <td>2014-1-8</td>
		        </tr>
		        <tr>
		            <td align="center"><input type="checkbox" name="cb"></td>
		            <td>Title4</td>
		            <td>李四摧</td>
		            <td>2014-1-15</td>
		        </tr>
		        <tr>
		            <td align="center"><input type="checkbox" name="cb"></td>
		            <td>Title5</td>
		            <td>周五轮</td>
		            <td>2010-1-2</td>
		        </tr>
				<tr>
		            <td align="center"><input type="checkbox" name="cb"></td>
		            <td>Title6</td>
		            <td>吴六破</td>
		            <td>2014-10-2</td>
		        </tr>
				<tr>
		            <td align="center"><input type="checkbox" name="cb"></td>
		            <td>Title7</td>
		            <td>郑七灭</td>
		            <td>2014-9-2</td>
		        </tr>
				<tr>
		            <td align="center"><input type="checkbox" name="cb"></td>
		            <td>Title8</td>
		            <td>王八衰</td>
		            <td>2014-11-2</td>
		        </tr>
			</tbody>
			<tfoot>
				<tr>
		        	<th colspan="4">
		        		<input type="button" value="全选" onclick="selectAll()">
						<input type="button" value="反选" onclick="reverseAll()">
		        		<input type="button" value="取消" onclick="cancelAll()">
					</th>
		        </tr>
			</tfoot>
		</table>
	</body>
</html>